<template>
    <div class="patient">
        <div class="title">
            <h1>就诊人管理</h1>
        </div>
        <div class="content">
            <PatientInfo v-for="(item, index) in visitorData" :key="item.id" :visitorData="item" />
            <el-card @click="$router.push('/user/add')" class="addCard" shadow="hover"
                :body-style="{ padding: '20px' }">
                <div class="add">
                    <Plus />
                    <span>添加就诊人</span>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import PatientInfo from './patientInfo/index.vue'
import { useVisitor } from '@/views/hospital/register/compasobles/useVisitor';
import { onMounted } from 'vue';

onMounted(() => getVisitorData())

let { visitorData, getVisitorData } = useVisitor()
let $router = useRouter()
</script>

<style scoped lang="scss">
.patient {
    .title {
        h1 {
            font-weight: bold;
        }
    }

    .content {
        // width: 80%;
        margin: 50px auto 0 auto;

        .addCard {
            margin: 20px 0;
            cursor: pointer;

            .add {
                display: flex;
                width: 100%;
                height: 15px;
                justify-content: center;
                color: #68A3F3;

                span {
                    margin-left: 5px;
                }
            }
        }
    }
}
</style>